<template>
  <div class="panle_head">
        <div class="panle_title">
            <i :class="$attrs.my_class"></i>
            <slot></slot>
        </div>
        <div class="panle_nav" @click="goRank">
            <a href="javascript:void(0);"><slot name="title"></slot></a>
        </div>
    </div>
</template>

<script>
export default {
    methods:{
        goRank(){
            if(!this.$attrs.type){
                this.$router.push('/rank')
            }else if(this.$attrs.type==="more"){
                this.$router.push({
                    name:'catalog',
                    params:{
                        id:this.$attrs.cid+""
                    }
                })
            }
        }
    }
}
</script>

<style lang="stylus" scoped>
.panle_head
        padding 0 .14rem
        height .4rem
        line-height .4rem
        display flex
        justify-content space-between
        align-items center
        .panle_title
            min-width .6rem
            display flex
            justify-content center
            font-size .16rem
            color #000
            i 
                background-image url('https://static.missevan.com/assets/m/images/build/sprite-icons-catalog@2x.4584f6ff.png')
                background-size 1.66rem 1.66rem
                width .26rem
                height .26rem
                top .07rem
                position relative
                
                line-height .4rem
                &.sound
                    background-position -0.28rem 0
                &.channel
                    background-position -1.12rem 0
                &.sound46
                    background-position -0.84rem -0.56rem
                &.sound5
                    background-position -0.56rem -0.28rem
                &.sound8
                    background-position -0.28rem -0.56rem
                &.sound108
                    background none
                &.sound26
                    background-position -0.84rem 0
                &.sound41
                    background-position -0.84rem -0.28rem
                &.sound6
                    background-position 0 -0.56rem
                &.sound65
                    background-position -0.84rem -0.84rem
                &.sound54
                    background-position -0.28rem -0.84rem
        .panle_nav
            color #9e9e9e
            display flex
            align-items center
            a
                color #9e9e9e
                font-size .13rem
                max-width .66rem
                display inline-block
            &::after
                content ""
                display block
                background-image url('https://static.missevan.com/assets/m/images/build/sprite-icons@2x.bfd3fcc1.png')
                width .18rem
                height .18rem
                background-position -2.23rem -1.32rem
                right -0.03rem
                background-size 2.62rem 2.34rem
                position relative
</style>